<template>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      :showCancel="true"
      @close="dialogConfig.show = false"
        :width="1200+'px'"
    >
    <div>
      <div class="top-panel">
        <el-card>
          <el-form :model="searchForm" label-width="150px" label-position="right">
            <el-row>
              <el-col :span="8">
                <el-form-item label="仓库或实验室名称">
                  <el-input
                    class="password-input"
                    v-model="searchForm.warehouseFuzzy"
                    clearable
                    placeholder="支持模糊搜索"
                    @keyup.enter="loadDataList"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" :style="{ paddingLeft: '10px' }">
                <el-button type="success" @click="loadDataList()"
                  >查询
                </el-button>
                <el-button
                  type="primary"
                  @click="showInventoryEdit()"
                  >新增库存信息
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <el-card class="table-data-card">
        <template #header>
          <span>库存信息列表</span>
        </template>
        <Table
          ref="tableInfoRef"
          :columns="columns"
          :fetch="loadDataList"
          :dataSource="tableData"
          :options="tableOptions"
          :extHeight="tableOptions.extHeight"
        >
        <template #slotCover="{ index, row }">

          <Cover
            :width="100"
            :height="100"
            :cover="row.imageUrl"
          ></Cover>
        </template>

          <template #slotOperation="{ index, row }">
            <div
              class="row-op-panel"

            >
              <a
                class="a-link"
                href="javascript:void(0)"
                @click="showInventoryEdit(row)"
                >编辑</a
              >
              <a
                class="a-link"
                href="javascript:void(0)"
                @click.prevent="delInventoryInfo(row)"
                >删除</a
              >
            </div>
          </template>
        </Table>
      </el-card>
      <IventoryEdit ref="inventoryRef" @reload="loadDataList"></IventoryEdit>
    </div>
    </Dialog>
  </template>

  <script setup>
  import { ref, reactive, getCurrentInstance, nextTick } from "vue";
  const { proxy } = getCurrentInstance();
  import IventoryEdit from "./IventoryEdit.vue";
  const api = {
    saveDeviceInfo: "/device/saveDeviceInfo",
  };


  const dialogConfig = ref({
    show: false,
    title: "新增图书",

  });
  const currentDeviceId=ref();
  const showEdit = (data) => {
    dialogConfig.value.show = true;
    nextTick(() => {
      dialogConfig.value.title=data.name+"库存详情";
      currentDeviceId.value=data.deviceId;
      loadDataList(data.deviceId)
    });
  };
  defineExpose({
    showEdit,
  });

  const searchForm = ref({});

  const tableData = ref({});
  const tableOptions = ref({
    extHeight: 125,
  });

  const columns = [
    {
      label: "所在仓库或实验室",
      prop: "warehouse",
    },
    {
      label: "详细位置",
      prop: "storageLocation",
    },
    {
      label: "总数量",
      prop: "totalQuantity",
    },
    {
      label: "可用数量",
      prop: "availableQuantity",
    },

    {
      label: "操作",
      prop: "operation",
      width: 250,
      scopedSlots: "slotOperation",
    },
  ];
  const tableInfoRef = ref();
  const loadDataList = async (deviceId) => {

    let params = {
      pageNo: tableData.value.pageNo,
      pageSize: tableData.value.pageSize,
      deviceId:deviceId,
    };
    Object.assign(params, searchForm.value);
    let result = await proxy.Request({
      url: "/device/loadInventoryList",
      params: params,
    });
    if (!result) {
      return;
    }
    Object.assign(tableData.value, result.data);
  };

  const inventoryRef=ref();
  const showInventoryEdit=(data={
  })=>{
    data.deviceId=currentDeviceId.value;
    inventoryRef.value.showEdit(data);
  }


  //删除
  const delInventoryInfo = (data) => {
    proxy.Confirm(`确定要删除吗？`, async () => {
      let result = await proxy.Request({
        url: "/device/delInventory",
        params: {
          inventoryId: data.inventoryId,
        },
      });
      if (!result) {
        return;
      }
      proxy.Message.success("操作成功");
      loadDataList();
    });
  };


  </script>

  <style lang="scss" scoped>
  .check-span-item {
    float: left;
    margin-right: 10px;
    line-height: 20px;
  }
  </style>
